<template>
  <div class="aiseo-home-customizedServices" ref="customerRef">
    <div class="custom-img"></div>
    <div style="flex: 1; background: #333333; height: 100%">
      <div class="aiseo-home-right">
        <!-- <div class="flex" style="align-items: baseline"> -->
        <!--      <img src="../../../assets/image/pageHome/footer1.png" alt="" />
          <div class="flex form-title">
            <div class="customized-title">定制</div>
            <div class="serve-title ml-4">服务</div>
            <div class="Horizontal ml-4"></div>
          </div> -->
        <!--  </div> -->
        <!--        <p class="title-en">Customize Services</p> -->
        <img
          src="../../../assets/image/pageHome/img／homepage／title／customServices@2x.png"
          alt=""
          style="width: 249px; height: 88px; object-fit: cover"
        />
        <p class="title-disc mt-24">
          留下您的联系方式和需求，专属客服将为您量身定制网推方案.
        </p>
        <div class="form-item phone-item">
          <img src="../../../assets/image/pageHome/footer2.png" alt="" />
          <div class="form-item-content">
            <div class="form-item-title">手机号码</div>
            <div
              class="form-item-phonebox"
              :class="{
                'form-item-phonebox-erro': errorText,
                'foucus-input': isFocus,
              }"
              style=""
            >
              <el-input
                class="phineInput"
                maxlength="11"
                v-model="serveForm.phoneNumber"
                placeholder="请输入您的手机号码"
                type="number"
                @focus="isFocus = true"
                @blur="
                  () => {
                    isFocus = false;
                    validatePhone();
                  }
                "
              />
              <!-- <input
                @blur="validatePhone"
                v-model="serveForm.phoneNumber"
                placeholder="请输入您的手机号码"
                class="phineInput"
              /> -->
              <span class="error-tips">{{ errorText }}</span>
            </div>
          </div>
        </div>
        <div class="form-item mt-48">
          <img src="../../../assets/image/pageHome/footer3.png" alt="" />
          <div class="form-item-content">
            <div class="form-item-title">需求描述</div>
            <el-input
              class="mt-12 form-item-textarea"
              maxlength="500"
              v-model="serveForm.describe"
              placeholder="请将内容控制在500字符以内"
              type="textarea"
              resize="none"
            />
          </div>
        </div>
        <div
          @click="handleSubmit"
          class="flex"
          style="align-items: unsafe; margin-top: 37px"
        >
          <div style="width: 60px; height: 40px"></div>
          <img
            v-show="serveForm.phoneNumber.length !== 11"
            style="width: 240px; height: 80px"
            src="@/assets/image/pageHome/button-diyNow-disabled.png"
            alt=""
          />
          <!-- <div v-show="serveForm.phoneNumber.length < 11" class="CustomizationTwo-forbidden">立刻定制</div> -->

          <!-- <div v-else class="CustomizationTwo-outer">
            <div class="CustomizationTwo-hover">
              <div class="CustomizationTwo-inner">立刻定制</div>
            </div>
            <div class="CustomizationTwo">立刻定制</div>
          </div> -->
          <div
            @mouseenter="handleMouseEnter"
            @mouseleave="handleMouseLeave"
            class="lottie-box"
            v-show="serveForm.phoneNumber.length === 11"
          >
            <img
              ref="image"
              class="lottie-box-item"
              src="@/assets/image/pageHome/button-diyNow_normal.png"
              alt=""
            />
            <div class="lottie-box-item" ref="lottieContainer"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";
import debounce from "lodash.debounce";
import EventBus from "@/utils/eventBus.js";
import animationData from "@/assets/lottie/homePage/button-diyNow_240_80";
import { reservation } from "@/utils/api/customerService/index";
import lottie from "lottie-web";

const serveForm = reactive({
  phoneNumber: "",
  describe: "",
});
const isFocus = ref(false);
const customerRef = ref();
const errorText = ref("");
const validatePhone = () => {
  // 手机号验证
  if (!serveForm.phoneNumber) {
    errorText.value = "手机号不能为空!";
    return false;
  } else {
    const reg = /^1\d{10}$/;
    if (reg.test(serveForm.phoneNumber)) {
      errorText.value = "";
      // 请求接口
      return true;
    } else {
      errorText.value = "请输入正确的手机号码.";
      return false;
    }
  }
};
const handleSubmit = debounce(() => {
  if (validatePhone()) {
    reservation({
      mobile: serveForm.phoneNumber,
      substance: serveForm.describe,
    }).then((res) => {
      const resData = JSON.parse(res.data.value);
      if (resData.code == 200) {
        EventBus.emit("openToastBox", ["定制成功！"]);
        serveForm.phoneNumber = "";
        serveForm.describe = "";
      } else {
        EventBus.emit("openToastBox", [resData.message ||"请重新定制！"]);
      }
    });
  }
}, 500);
const lottieContainer = ref(null);
const image = ref(null);
const clickableBox = ref(null);
let animationInstance = null;
let isInner = false;
const startAnimation = () => {
  image.value.style.opacity = "0";
  lottieContainer.value.style.opacity = "1";
  if (!animationInstance) {
    animationInstance = lottie.loadAnimation({
      container: lottieContainer.value,
      renderer: "svg",
      loop: false,
      autoplay: true,
      animationData: animationData,
    });
  }
  isInner = true;
  // animationInstance.addEventListener('complete', callback); // 监听动画播放完成事件
  animationInstance.playSegments([0, 45], true);
};

const handleMouseEnter = () => {
  startAnimation();
};

const handleMouseLeave = () => {
  isInner = false;

  animationInstance.addEventListener("complete", callback); // 监听动画播放完成事件
  animationInstance.playSegments([45, 85], true);
  // stopAnimation();
};
const callback = (e) => {
  if (!image.value) return;
  animationInstance.removeEventListener("complete", callback); // 监听动画播放完成事件
  if (!isInner) {
    image.value.style.opacity = "1";
    lottieContainer.value.style.opacity = "0";
  }
};
onMounted(() => {
  EventBus.on("clicktoCustomizedServices", () => {
    const element = document.getElementById("app");
    element.scrollTo({
      top: customerRef.value.offsetTop - 60,
      behavior: "smooth",
    });
  });
});
onUnmounted(() => {
  EventBus.off("clicktoCustomizedServices");
});
</script>

<style lang="scss" scoped>
.aiseo-home-customizedServices {
  height: 920px;
  width: 1920px;
  display: flex;
  align-items: center;
  margin: 0 auto;
  background: linear-gradient(to bottom, #141412 75%, #090909 100%);
  .custom-img {
    width: 800px;
    height: 100%;
    background: url(@/assets/image/pageHome/img-homepage-pictureRes-customizeServices.webp);
    background-repeat: no-repeat;
    background-position: right;
  }
  .aiseo-home-right {
    width: 760px;
    padding: 66px 16px 66px 24px;
    box-sizing: border-box;
    img {
      width: 40px;
    }
    .form-title {
      color: #ffffff;
      align-items: baseline;
      font-weight: bold;
      margin-left: 24px;
      .customized-title {
        font-family: HelloFont WenYiHei;
        font-weight: 400;
        font-size: 48px;
        color: #e6e6e6;
      }
      .serve-title {
        font-family: HelloFont WenYiHei;
        font-weight: 400;
        font-size: 32px;
        color: #e6e6e6;
      }
      .Horizontal {
        width: 16px;
        height: 4px;
        background: #e62e3d;
      }
    }
    .title-en {
      margin-left: 64px;
      font-family: Poiret One;
      font-weight: 400;
      font-size: 24px;
      color: #e6e6e6;
    }
    .title-disc {
      margin-left: 64px;
      font-family: Alibaba PuHuiTi-Regular;
      font-weight: bold;
      font-size: 24px;
      color: #e6e6e6;
    }
    .title {
      font-size: 32px;
      text-align: center;
    }

    .customizedServices-content {
      display: flex;

      .customizedServices-form {
        .el-button {
          margin-left: 120px;
        }
      }
    }
    .form-item {
      display: flex;
      img {
        width: 40px;
        height: 40px;
      }
      .form-item-content {
        margin-left: 24px;
        flex: 1;
        .form-item-title {
          font-family: Alibaba PuHuiTi-Regular;
          font-weight: bold;
          font-size: 24px;
          color: #e6e6e6;
        }
        .form-item-phonebox {
          // padding-bottom: 5px;
          border-bottom: 2px solid #808080;
          width: 100%;
          font-family: Alibaba PuHuiTi-Regular;
          font-weight: 400;
          font-size: 16px;
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          &:hover {
            border-bottom: 2px solid #e62e3d;
          }
          .phineInput {
            border: none;
            margin-top: 16px;
            background: none;
            color: #ffffff;
            font-family: Alibaba PuHuiTi-Regular;
            width: 300px;
            :deep(.el-input__wrapper) {
              background: none !important;
              box-shadow: none;
              font-family: Alibaba PuHuiTi-Regular;
              .el-input__inner {
                color: #ffffff;
                &::-webkit-input-placeholder {
                  /* WebKit browsers，webkit内核浏览器 */
                  font-family: Alibaba PuHuiTi-Regular;
                  font-weight: 400;
                  font-size: 16px;
                  color: #808080;
                }
                &:hover {
                  &::-webkit-input-placeholder {
                    /* WebKit browsers，webkit内核浏览器 */
                    color: #e6e6e6;
                  }
                }
              }
            }
          }
          .error-tips {
            opacity: 0;
          }
        }
        .foucus-input {
          border-bottom: 2px solid #e62e3d;
        }
        .form-item-phonebox-erro {
          border-bottom: 2px solid #e62e3d;
          color: #e62e3d;
          .error-tips {
            opacity: 1;
          }
          :deep(.el-input__inner) {
            color: #e62e3d !important;
          }
        }
        .form-item-textarea {
          width: 600px;
          height: 248px;
          background: #393939;
          border-radius: 2px 24px 24px 24px;
          padding: 24px;
          box-sizing: border-box;
          :deep(.el-textarea__inner) {
            background: none;
            height: 100%;
            box-shadow: none;
            padding: 0;
            color: #e6e6e6;
            font-family: Alibaba PuHuiTi-Regular;
            font-weight: 400;
            font-size: 16px;
            &::-webkit-input-placeholder {
              /* WebKit browsers，webkit内核浏览器 */
              color: #808080;
            }
          }
        }
      }
    }
    .phone-item {
      margin-top: 76px;
    }
  }
}
.CustomizationTwo-forbidden {
  border-radius: 40px;
  width: 190px;
  height: 57px;
  border: 2px solid #808080;
  color: #808080;
  cursor: not-allowed;
  line-height: 57px;
  font-family: Alibaba PuHuiTi-Regular;
  font-weight: bold;
  font-size: 24px;
  text-align: center;
  margin-left: 10px;
}
.lottie-box {
  position: relative;
  cursor: pointer;
  &-item {
    width: 240px !important;
    height: 80px;
    position: absolute;
    left: 0;
  }
}
.CustomizationTwo-outer {
  width: 214px;
  height: 61px;
  position: relative;
  font-family: Alibaba PuHuiTi-Regular;
  font-weight: bold;
  font-size: 24px;
  color: #e6e6e6;
  display: flex;
  justify-content: center;
  .CustomizationTwo {
    border-radius: 40px;
    width: 190px;
    height: 57px;
    border: 2px solid #ffffff;
    line-height: 57px;
    text-align: center;
    cursor: pointer;
    position: absolute;
    opacity: 1;
    transition: all 0.5s;
  }
  .CustomizationTwo-hover {
    width: 190px;
    height: 61px;
    border-radius: 31px 31px 31px 31px;
    border: 2px solid #e62e3d;
    padding: 2px;
    box-sizing: border-box;
    position: absolute;
    opacity: 0;
    transition: all 0.5s;
    .CustomizationTwo-inner {
      width: 100%;
      height: 100%;
      border-radius: 31px 31px 31px 31px;
      background: #e62e3d;
      text-align: center;
      line-height: 54px;
    }
  }
  &:hover {
    .CustomizationTwo {
      width: 214px;
      opacity: 0;
      transition: all 0.5s;
    }
    .CustomizationTwo-hover {
      width: 214px;
      opacity: 1;
      transition: all 0.5s;
    }
  }
}
</style>
